import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter_kit_dsp/flutter_kit_dsp.dart';
import 'package:flutter_kit_plus/flutter_kit.dart';

import '../../tool/assets.dart';

class HomeRight extends StatefulWidget {
  void Function(String tag, dynamic value) onClick;
  HomeRight({super.key, required this.onClick});

  @override
  State<HomeRight> createState() => _HomeRightState();
}

class _HomeRightState extends State<HomeRight> {
  List<String> options = ['SEARCH', 'CUSTOM NAME', 'CHANGE PWASSORD', 'LOAD FROM FILE'];
  List<String> btn_list = ['IN', 'OUT', 'EQ', 'XO', 'TIME'];
  List<Routes> routes_list = [Routes.SUM, Routes.GAIN, Routes.EQ, Routes.CROSSOVER, Routes.DELAY];
  List<bool> btn_highlight = [false, false, false, false, false];
  List<String> btn_icon_list = [assets.btn_in, assets.btn_out, assets.btn_eq, assets.btn_xo, assets.btn_time];
  List<String> btn_icon_on_list = [
    assets.btn_in_select,
    assets.btn_out_select,
    assets.btn_eq_select,
    assets.btn_xo_select,
    assets.btn_time_select
  ];

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    for (var element in btn_icon_list) {
      precacheImage(AssetImage(element), context);
    }

    for (var $0 in btn_icon_on_list) {
      precacheImage(AssetImage($0), context);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      spacing: 10,
      children: [
        Flexible(
          flex: 2,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Flexible(
                  flex: 4,
                  child: LongPressGestureDetector(
                      duration: const Duration(milliseconds: 5000),
                      onLongPress: () {
                        LogRecorder.toggle(context);
                      },
                      child: Image.asset(assets.massive, fit: BoxFit.contain))),
              // Expanded(child: Container()),
              Flexible(
                child: Padding(
                  padding: const EdgeInsets.only(top: 10),
                  child: PopupMenuButton<String>(
                    onSelected: (text) => widget.onClick(text, null),
                    offset: const Offset(30, 40),
                    itemBuilder: (BuildContext context) =>
                        options.map(($0) => PopupMenuItem<String>(value: $0, child: Text($0))).toList(),
                    child: Image.asset(assets.more, width: 40, height: 40),
                  ),
                ),
              ),
            ],
          ),
        ),

        ///play
        Expanded(
          flex: 5,
          child: Row(
            children: [
              ///offline
              Expanded(
                flex: 1,
                child: Container(
                    padding: const EdgeInsets.only(left: 10, right: 10, top: 10, bottom: 10),
                    child: Obx(() {
                      return Column(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
                          InkWell(
                            child: SizedBox(
                              height: 50,
                              child: Stack(
                                children: [
                                  Positioned(
                                      top: 0,
                                      left: 0,
                                      right: 0,
                                      bottom: 0,
                                      child: Image.asset(BluetoothManager.instance.isConnectedRx
                                          ? assets.online_bg
                                          : assets.offline_bg)),
                                  Positioned(
                                      top: 0,
                                      left: 0,
                                      right: 0,
                                      bottom: 0,
                                      child: Center(
                                          child: Text(BluetoothManager.instance.isConnectedRx ? 'ONLINE' : 'OFFLINE',
                                              style: fontNormal)))
                                ],
                              ),
                            ),
                            onTap: () {},
                          ),

                          // Expanded(child: Container()),

                          InkWell(
                              child: Center(
                                  child: Image.asset(homeController.rxModel.value.mute ? assets.mic_off : assets.mic_on,
                                      height: 40)),
                              onTap: () => widget.onClick('静音', null)),
                        ],
                      );
                    })),
              ),
              Flexible(
                  flex: 3,
                  child: Container(
                    decoration: boxDecorationWithColor(10, const Color(0xFF9ED1E6)),
                    child: Column(
                      children: [
                        Expanded(flex: 1, child: Center(child: Text('PLAYER', style: font20))),
                        Expanded(
                            flex: 3,
                            child: homeController.playView(assets.play, assets.pause, assets.previous, assets.next,
                                const Size(60, 60), const Size(60, 60))),
                      ],
                    ),
                  ))
            ],
          ),
        ),

        ///memory
        Expanded(
          flex: 4,
          child: Row(
            children: [
              Expanded(flex: 1, child: Container()),
              Expanded(
                flex: 3,
                child: Container(
                  decoration: boxDecorationWithColor(10, const Color(0xFF82BEAD)),
                  child: Column(
                    children: [
                      Expanded(flex: 1, child: Center(child: Text('MEMORY', style: font20))),
                      Expanded(
                        flex: 3,
                        child: LayoutBuilder(builder: (BuildContext context, BoxConstraints constrains) {
                          return Obx(() {
                            List<String> memoryList = [...homeController.memory_tag_list];
                            var selectMemoryTag = homeController.rxModel.value.tag;
                            double width = min((constrains.maxWidth - 10 * (memoryList.length + 1)) / memoryList.length,
                                constrains.maxHeight - 20);
                            return Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: List.generate(memoryList.length, (index) {
                                var tag = memoryList[index];
                                return myTextButton(
                                  width: width,
                                  height: width,
                                  colors: [const Color(0xFF82BEAD), Colors.white.withOpacity(0.5)],
                                  select: selectMemoryTag == tag,
                                  child: Center(child: Text(tag, style: font40)),
                                  onTap: () => homeController.selectMemory(context, tag),
                                );
                              }),
                            );
                          });
                        }),
                      ),
                    ],
                  ),
                ),
              )
            ],
          ),
        ),

        ///底部按钮
        Flexible(
          flex: 3,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: List.generate(btn_highlight.length, (index) {
              var icon = btn_highlight[index] ? btn_icon_on_list[index] : btn_icon_list[index];
              return Flexible(
                child: InkWell(
                  onTap: () => homeController.toPage(context, routes_list[index]),
                  onTapDown: (details) => setState(() => btn_highlight[index] = true),
                  onTapUp: (details) => setState(() => btn_highlight[index] = false),
                  child: Column(
                    spacing: 5,
                    children: [
                      Text(btn_list[index], style: font20),
                      Flexible(child: Image.asset(icon, fit: BoxFit.fitWidth))
                    ],
                  ),
                ),
              );
            }),
          ),
        )
      ],
    );
  }
}
